<template>
  <div class="common-login">
    <el-form ref="loginFormRef" :model="authStore.loginForm"
             :rules="rules" class="login-form"
             autocomplete="on" label-position="left"
             @submit.native.prevent>
      <!-- 账户名表单选项 -->
      <el-form-item prop="username" class="form-item">
        <el-input
            v-model="authStore.loginForm.username"
            placeholder="请输入账号" clearable
        >
          <template #prefix>
            <i class="fa-solid fa-user"></i>
          </template>
        </el-input>
      </el-form-item>

      <!-- password表单选项 -->
      <el-form-item prop="password" class="form-item">
        <el-input
            v-model="authStore.loginForm.password"
            placeholder="请输入密码" type="password"
            show-password clearable
            @keyup.enter.native="handleLogin('common')"
        >
          <template #prefix>
            <i class="fa-solid fa-lock"></i>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <login-auth />
      </el-form-item>

      <el-form-item class="login-option">
        <el-checkbox v-model="authStore.loginForm.isRemember">记住密码</el-checkbox>
        <el-link type="primary">忘记密码？</el-link>
      </el-form-item>
    </el-form>

    <el-button type="primary" style="width: 100%;"
               :disabled="!authStore.isVerified"
               :loading="authStore.loginLoading"
               @click.prevent="handleLogin('common')">登录
    </el-button>
    <div />

    <div class="login-type">
      <el-button>手机号登录</el-button>
      <el-button>扫码登录</el-button>
    </div>

    <div class="login-others-type">
      <el-divider content-position="center">其他登录方式</el-divider>

      <div class="type-list">
        <i class="fa-brands fa-weixin" style="color: #3CB034"></i>
        <i class="fa-brands fa-qq" style="color: #29A4D9"></i>
        <i class="fa-solid fa-envelope" style="color: #4971B8"></i>
        <i class="fa-brands fa-github" style="color: #555555"></i>
      </div>
    </div>

    <div class="login-register">
      <span>还没有账户？</span>
      <el-link type="primary" @click="authStore.changeLoginType('register')">创建账户</el-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import LoginAuth from '@/components/Login/LoginAuth.vue'
import { useAuthStore } from '@/store/auth'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { loginRules } from '@/utils/element/elRules'
import { getLocalStorage, setLocalStorage } from 'vue3-common/utils/storageUtil'
import type { ILoginType } from '@/types/auth'
import { isMobile } from 'vue3-common/utils/layoutUtil'

const rules = reactive<FormRules>(loginRules)
const authStore = useAuthStore()
const router = useRouter()
const userStore = useUserStore()

const loginFormRef = ref()

onMounted(async () => {
  const storageLoginForm = getLocalStorage('loginForm')
  if (storageLoginForm) {
    authStore.loginForm = JSON.parse(storageLoginForm)

    if (!authStore.isLogout) {
      await doLogin('common')
    }
  }
})

const handleLogin = async (type: ILoginType) => {
  loginFormRef.value.validate(async (valid: any) => {
    if (valid) {
      if (!isMobile()) {
        ElMessage.error('目前只支持移动端')
        return
      }

      authStore.loginLoading = true

      try {
        await doLogin(type)
      } finally {
        authStore.loginLoading = false
      }
    } else {
      ElMessage.error('请输入正确的信息')
      return false
    }
  })
}

const doLogin = async (type: ILoginType) => {
  await authStore.handleLogin(type)
  userStore.handleSession(authStore.session)

  // 2. 存储账户密码到localStorage中
  if (authStore.loginForm.isRemember) {
    setLocalStorage('loginForm', JSON.stringify(authStore.loginForm))
  }

  await router.push('/record')
}
</script>
